<div class="cne-login-content flex items-center justify-center">
  <mat-card appearance="raised">
    <mat-card-header class="cne-login-header flex items-center justify-center">
      <img src="/assets/logo.svg" alt="Logo" class="cne-logo-icon" />
      <h1>Cne Admin</h1>
    </mat-card-header>

    <mat-card-content>
      <form class="cne-login-form flex flex-col" [formGroup]="loginForm" (ngSubmit)="onSubmit()">
        @if (errorMessage(); as err) {
          <div class="error-message flex items-center gap-2 py-2.5 px-3.5 mb-3 rounded-lg text-[13px]">
            <mat-icon class="text-lg">error</mat-icon>
            <span>{{ err }}</span>
          </div>
        }

        <mat-form-field appearance="outline">
          <mat-label>用户名</mat-label>
          <input matInput formControlName="username" placeholder="请输入用户名" />
          <mat-icon matPrefix>person</mat-icon>
          @if (hasError('username')) {
            <mat-error>{{ getErrorMessage('username') }}</mat-error>
          }
        </mat-form-field>

        <mat-form-field appearance="outline">
          <mat-label>密码</mat-label>
          <input
            matInput
            [type]="hidePassword() ? 'password' : 'text'"
            formControlName="password"
            placeholder="请输入密码"
          />
          <mat-icon matPrefix>lock</mat-icon>
          <button
            mat-icon-button
            matSuffix
            (click)="togglePasswordVisibility()"
            [attr.aria-label]="'隐藏密码'"
            [attr.aria-pressed]="hidePassword()"
            type="button"
          >
            <mat-icon>{{ hidePassword() ? 'visibility_off' : 'visibility' }}</mat-icon>
          </button>
          @if (hasError('password')) {
            <mat-error>{{ getErrorMessage('password') }}</mat-error>
          }
        </mat-form-field>

        <div class="flex justify-between items-center mb-4">
          <mat-checkbox formControlName="rememberMe">自动登录</mat-checkbox>
          <button color="primary" mat-button type="button">忘记密码?</button>
        </div>

        <button mat-raised-button color="primary" type="submit" class="h-10"
          [disabled]="isLoading()"
        >
          @if (isLoading()) {
            <span>登录中...</span>
          } @else {
            <span>登录</span>
          }
        </button>
      </form>
      
      <div class="oauth-container flex justify-between items-center">
          <div class="flex items-center">
            <span>其它方式</span>
            <div class="flex items-center justify-between ml-4">
              <a class="social-icon" title="GitHub">
                <mat-icon svgIcon="mdi:github"></mat-icon>
              </a>
              <a class="social-icon" title="微信">
                <mat-icon svgIcon="mdi:wechat"></mat-icon>
              </a>
              <a class="social-icon" title="新浪微博">
                <mat-icon svgIcon="mdi:sina-weibo"></mat-icon>
              </a>
            </div>
          </div>

          <div>
            <button color="primary" mat-button type="button">注册账号</button>
          </div>
      </div>
    </mat-card-content>
  </mat-card>
</div>
